<link
  rel="stylesheet"
  href="https://cdn.trieve.ai/beta/search-component/index.css"
/>

<script type="module">
  import {renderToDiv} from 'https://cdn.trieve.ai/beta/search-component/vanilla/index.js';
  import {addToCart, checkCartQuantity} from '{{'cart-manager.js' | asset_url}}';

  const root = document.createElement('div');
  document.body.appendChild(root);

  const toBool = (value) => value === 'true';
  const getValue = (value, defaultValue) => {
    if (value === null || value === undefined || value === '') {
      return defaultValue;
    }
    return value;
  };

  renderToDiv(root, {
    // Required values
    type: "ecommerce",
    apiKey: getValue("{{ app.metafields.trieve.api_key }}", ""),
    datasetId: getValue("{{ app.metafields.trieve.dataset_id }}", ""),
    baseUrl: getValue("{{ block.settings.base_url }}", "https://api.trieve.ai"),
    useGroupSearch: true,
    allowSwitchingModes: toBool(getValue("{{ block.settings.allow_switching_modes }}", true)),
    zIndex: Number(getValue("{{ block.settings.z_index }}", 21474830000000)),
    scaleRem: true,
    defaultSearchMode: getValue("{{ block.settings.default_search_mode }}", "chat"),
    brandName: getValue("{{ block.settings.brand_name }}", ""),
    brandColor: getValue("{{ block.settings.brand_color }}", ""),
    floatingSearchIconPosition: getValue("{{ block.settings.floating_icon_pos }}", "right"),
    showFloatingSearchIcon: toBool(getValue("{{ block.settings.floating_search_icon }}", false)),
    showFloatingInput: toBool(getValue("{{ block.settings.floating_search_bar }}", false)),
    placeholder: getValue("{{ block.settings.placeholder }}", "Search..."),
    chatPlaceholder: getValue("{{ block.settings.chat_placeholder }}", "Ask Anything..."),
    showFloatingButton: toBool(getValue("{{ block.settings.show_floating_button }}", false)),
    floatingButtonPosition: getValue("{{ block.settings.floating_button_position }}", "bottom-right"),
    suggestedQueries: toBool(getValue("{{ block.settings.suggested_queries }}", true)),
    followupQuestions: toBool(getValue("{{ block.settings.suggested_queries }}", true)),
    numberOfSuggestions: Number(getValue("{{ block.settings.number_of_suggestions }}", 3)),
    theme: getValue("{{ block.settings.theme }}", "light"),
    onAddToCart: (chunk) => {
      addToCart(parseInt(chunk.tracking_id))
    },
    getCartQuantity: (trackingId) => {
      return checkCartQuantity(parseInt(trackingId));
    },
  });
</script>

{% comment %}
  see more about the schema section here. https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema#schema

  If the input is not valid json, it will not work
{% endcomment %}
{% schema %}
{
  "name": "Trieve Global component",
  "target": "body",
  "settings": [
    {
      "type": "text",
      "id": "base_url",
      "label": "Base URL",
      "default": "https://api.trieve.ai"
    },
    {
      "type": "select",
      "id": "default_search_mode",
      "label": "Default Search Mode",
      "options": [
        {"label": "Search", "value": "search"},
        {"label": "Chat", "value": "chat"}
      ],
      "default": "chat"
    },
    {
      "type": "text",
      "id": "placeholder",
      "label": "Search Placeholder Text",
      "default": "Search..."
    },
    {
      "type": "text",
      "id": "chat_placeholder",
      "label": "Chat Placeholder Text",
      "default": "Ask Anything..."
    },
    {
      "type": "select",
      "id": "theme",
      "label": "Theme",
      "options": [
        {"label": "Light", "value": "light"},
        {"label": "Dark", "value": "dark"}
      ],
      "default": "light"
    },
    {
      "type": "color",
      "id": "brand_color",
      "label": "Brand Color",
      "default": "#ff0000"
    },
    {
      "type": "text",
      "id": "brand_name",
      "label": "Brand Name",
      "default": "TrieveAi"
    },
    {
      "type": "checkbox",
      "id": "suggested_queries",
      "label": "Show Suggested Queries",
      "default": true
    },
    {
      "type": "number",
      "id": "number_of_suggestions",
      "label": "Number of Suggestions",
      "default": 3
    },
    {
      "type": "checkbox",
      "id": "allow_switching_modes",
      "label": "Allow Switching Modes",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "open_links_new_tab",
      "label": "Open Links in New Tab",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_floating_button",
      "label": "Show Floating Button",
      "default": false
    },
    {
      "type": "select",
      "id": "floating_button_position",
      "label": "Floating Button Position",
      "options": [
        {"label": "Top Left", "value": "top-left"},
        {"label": "Top Right", "value": "top-right"},
        {"label": "Bottom Left", "value": "bottom-left"},
        {"label": "Bottom Right", "value": "bottom-right"}
      ],
      "default": "bottom-right"
    },
    {
      "type": "select",
      "id": "floating_icon_pos",
      "label": "Floating Icon Position",
      "options": [
        {"label": "Left", "value": "left"},
        {"label": "Right", "value": "right"}
      ],
      "default": "left"
    },
    {
      "type": "checkbox",
      "id": "show_floating_search_icon",
      "label": "Show Floating Search Icon",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_floating_input",
      "label": "Show Floating Input",
      "default": false
    },
    {
      "type": "number",
      "id": "z_index",
      "label": "Z-Index",
    }
  ]
}
{% endschema %}
